import React, { Component } from "react";
import {
  BrowserRouter,
  Route,
  Switch,
  Router,
  Redirect,
} from "react-router-dom";
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from "react-toastify";
import PostDetailsPage from "@pages/ForumPage/components/PostDetailsPage";
import 'animate.css';
import HomePage from "@pages/HomePage";
import Layout from "./shared/Layout";
import Login from "@pages/Login";
import Forget from "@pages/ForgetPage";
import UserPage from "@pages/UserPage";
import OnlineTooles from "@pages/OnlineToolesPage";
import ToolesMiddle from "./shared/Layout/ToolesMiddle";
import Musical from "@pages/MusicalPage";
import Forum from "../src/pages/ForumPage";
import OnlineCourses from "@pages/OnlineCoursesPage";
import { createBrowserHistory } from "history";
import MusicScore from "./pages/MusicalPage/components/MusicScore";
import AllMusicScore from "@pages/MusicalPage/components/AllMusicScore";
import MusicPu from "@pages/UserPage/components/createCenter/components/MusicPu";
import ReleaseForum from "@pages/ForumPage/components/ReleaseForumpage";
export const history = createBrowserHistory();
export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Router history={history}>
          <Route>
            <Layout>
              {/*<h1>111111111</h1>*/}
              <ToastContainer
                  position="top-center"
                  // style={{top : '20%'}}
                  style={{
                    position:"absolute",
                    top : '10vw'
                  }}

              />
              <Switch>
                <Redirect from="/" to="/Home" exact />
                <Route path="/Home" component={HomePage} />
                <Route path="/Login" component={Login}></Route>
                <Route path="/Forget" component={Forget}></Route>
                <Route path="/User/:id" component={UserPage}></Route>
                {/*<Route path="/OnlineTooles" component={OnlineTooles}>*/}
                {/*  <ToolesMiddle>*/}
                {/*    <Switch>*/}
                {/*      <Redirect*/}
                {/*        from="/OnlineTooles"*/}
                {/*        to="/OnlineTooles/Tooles"*/}
                {/*        exact*/}
                {/*      />*/}
                {/*      <Route*/}
                {/*        path="/OnlineTooles/Tooles"*/}
                {/*        component={OnlineTooles}*/}
                {/*      />*/}
                {/*    </Switch>*/}
                {/*  </ToolesMiddle>*/}
                {/*</Route>*/}
                <Route path='/Add/MusicPu' component={MusicPu}></Route>
                <Route
                  path="/Musical/MusicScore/:id"
                  component={MusicScore}
                ></Route>
                <Route
                    path="/Musical/AllMusical/:name"
                    component={AllMusicScore}
                ></Route>
                <Route path="/Musical" component={Musical}></Route>
                <Route path = '/Forum/Release/'  component = {ReleaseForum}>< / Route >
                <Route path = "/Forum/ForumDetails/" component={Musical} component = {
                  PostDetailsPage
                }></Route>
                <Route path="/Forum" component={Forum}></Route>
                <Route path="/OnlineCourses" component={OnlineCourses}></Route>
              </Switch>
              <Switch> </Switch>
            </Layout>
          </Route>
        </Router>
      </BrowserRouter>
    );
  }
}
